<template>
    <div class="box">
        <div class="header">
            <div class="w">
                <div class="header_top">
                    <div>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="header_right">
                        <el-button text>
                            <el-icon style="vertical-align: middle">
                                <img width="20px" src="@/assets/img/header/touxing.png" alt="">
                            </el-icon>
                            <span style="vertical-align: middle"> 用户名称 </span>
                        </el-button>
                        <el-button size="small" color="#2270D7" type="primary">进入会员中心</el-button>
                        <el-button text>
                            <el-icon style="vertical-align: middle">
                                <img width="25px" src="@/assets/img/header/huiyuan.png" alt="">
                            </el-icon>
                            <span style="vertical-align: middle; margin-left: 10px;"> 标准会员 </span>
                        </el-button>
                        <el-button size="small" color="#D72A07" type="danger">
                            <el-icon style="vertical-align: middle">
                                <img src="@/assets/img/header/tuichu.png" alt="">
                            </el-icon>
                            <span style="vertical-align: middle"> 退出 </span>
                        </el-button>
                    </div>
                </div>
                <div class="header_box">
                    <div class="mr30">
                        <img width="268px" src="@/assets/img/header/logo.png" alt="">
                    </div>
                    <div class="flex">
                        <div class="header_input">
                            <el-input style="border: none;" v-model="lookSth"
                                placeholder="示例：办公用品 蒙牛乳业，多个关键词用空格隔开" />
                            <div class="grid-content ep-bg-purple">
                                <el-button type="primary" color="#2270D7" :icon="Search">查询</el-button>
                            </div>
                        </div>
                        <div class="vogue"><span class="span" v-for="(item, index) in arrS" :key="index">{{ item }}</span>
                        </div>
                    </div>
                    <div style="margin-top: -29px;">
                        <el-button style="width: 120px; height: 50px;" color="#FE8D03" type="danger">
                            <el-icon style="vertical-align: middle">
                                <img src="@/assets/img/header/laba.png" alt="">
                            </el-icon>
                            <span style="vertical-align: middle; color: aliceblue; margin-left: 10px; font-weight: 700;">
                                公告标讯 </span>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
const lookSth = ref('')
const arr = ['充电桩', '充电桩', '充电桩', '充电桩', '充电桩', '充电桩', '充电桩']
const arrS = ref(arr)
import { useLookStore } from '../../pinia/index'
const store = useLookStore()


watch(lookSth, (newVal, oldVal) => {
    store.input = newVal
    console.log(store.input)
})
</script>

<style lang="scss" scoped>
.mr30 {
    margin-right: 30px;
}

.flex {
    flex: 1;
}

.box {
    width: 100%;
    height: 10.625vw;

    .header {
        height: 3.125vw;
        border-bottom: 1px solid #DDDDDD;

        .w {
            width: 75vw;
            margin: 0 auto;

            .header_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 3.125vw;

                .header_right {
                    display: flex;
                    align-items: center;
                }
            }

            .header_box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 7.5vw;

                .header_input {
                    display: flex;
                    width: 46.4375vw;
                    height: 3.125vw;
                    border: 1px solid #2270D7;
                    border-radius: 5px;

                    .el-button {
                        height: 3.125vw;
                    }
                }

                .vogue {
                    padding-top: 10px;

                    .span {
                        padding: 0 0.625vw;
                        font-size: 12px;
                        border-right: 1px solid #333;

                        &:last-child {
                            border: 0;

                        }
                    }

                }
            }
        }
    }
}</style>